<template>
  <div class="devired-index-logic">
    <div class="list-wrap">
      <div class="ul">
        <div
          class="logical"
          :class="{ 'logical-or': tagConfig.logicalOperation === 'or' }"
          v-if="tagConfig.tagList && tagConfig.tagList.length > 1"
        >
          <el-select v-model="tagConfig.logicalOperation" disabled popper-class="factory-select" class="default">
            <el-option label="且" value="and"></el-option>
            <el-option label="或" value="or"></el-option>
          </el-select>
        </div>
        <div v-for="(item, index) in tagConfig.tagList" :key="index" class="ul-wrap">
          <!-- 没有下级 -->
          <template v-if="!item.tagList">
            <div class="list-item" :level="1" :fieldNm="item.fieldNm" :index="index">
              <el-row :gutter="8">
                <el-col :span="8">
                  <div class="item" align="center">
                    {{ item.fieldNm }}
                  </div>
                </el-col>
                <el-col :span="4" align="center">
                  <div class="item">
                    <el-select v-model="item.operationType" disabled>
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="opera in operatorType('type' + item.valueType)"
                        :key="opera.value"
                        :label="opera.key"
                        :value="opera.value"
                      ></el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="item">
                    <factory-content-item :config="item" disabled></factory-content-item>
                  </div>
                </el-col>
              </el-row>
            </div>
          </template>
          <template v-else>
            <div class="ol" :class="{ space: item.tagList.length > 1 }">
              <div class="logical" :class="{ 'logical-or': item.logicalOperation === 'or' }">
                <el-select
                  v-model="item.logicalOperation"
                  :level="index"
                  popper-class="factory-select"
                  disabled
                  class="default"
                >
                  <el-option label="且" value="and"></el-option>
                  <el-option label="或" value="or"></el-option>
                </el-select>
              </div>
              <div v-for="(child, index2) in item.tagList" :key="index2">
                <!-- 没有第三层 -->
                <template v-if="!child.tagList">
                  <div class="list-item" :level="2" :fieldNm="child.fieldNm" :index="index + '-' + index2">
                    <el-row :gutter="8">
                      <el-col :span="8">
                        <div class="item" align="center">
                          {{ child.fieldNm }}
                        </div>
                      </el-col>
                      <el-col :span="4" align="center">
                        <div class="item">
                          <el-select v-model="child.operationType" disabled>
                            <el-option label="---" value=""></el-option>
                            <el-option
                              v-for="opera in operatorType('type' + child.valueType)"
                              :key="opera.value"
                              :label="opera.key"
                              :value="opera.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="item">
                          <factory-content-item :config="child" disabled></factory-content-item>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </template>
                <div class="ol space" v-else>
                  <!-- 第三层的逻辑符号 -->
                  <div class="logical" :class="{ 'logical-or': child.logicalOperation === 'or' }">
                    <el-select
                      v-model="child.logicalOperation"
                      :level="index + '-' + index2"
                      popper-class="factory-select"
                      disabled
                      class="default"
                    >
                      <el-option label="且" value="and"></el-option>
                      <el-option label="或" value="or"></el-option>
                    </el-select>
                  </div>
                  <div v-for="(third, index3) in child.tagList" :key="index3">
                    <div
                      class="list-item"
                      :level="3"
                      :fieldNm="third.fieldNm"
                      :index="index + '-' + index2 + '-' + index3"
                    >
                      <el-row :gutter="8">
                        <el-col :span="8">
                          <div class="item" align="center">
                            {{ third.fieldNm }}
                          </div>
                        </el-col>
                        <el-col :span="4" align="center">
                          <div class="item">
                            <el-select v-model="third.operationType" disabled>
                              <el-option label="---" value=""></el-option>
                              <el-option
                                v-for="opera in operatorType('type' + third.valueType)"
                                :key="opera.value"
                                :label="opera.key"
                                :value="opera.value"
                              ></el-option>
                            </el-select>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="item">
                            <factory-content-item :config="third" disabled></factory-content-item>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import operator from '../../factory/operator'
import factoryContentItem from '../../factory/factory-content-item'
export default {
  components: {
    factoryContentItem
  },
  props: {
    tagConfig: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    operatorType(key) {
      return operator[key]
    }
  }
}
</script>

<style lang="scss">
.devired-index-logic {
  position: relative;
  .el-row {
    width: 100%;
  }
  .list-wrap {
    padding: 20px;
    background-color: #f6f7f8;
    position: relative;
    .ul,
    .ol {
      padding-left: 100px;
      position: relative;
      &.space {
        padding-left: 100px;
      }
      .logical {
        width: 100px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        &.space-logical {
          left: 100px;
        }
        .el-select {
          position: absolute;
          top: 50%;
          left: 15px;
          margin-top: -20px;
          z-index: 2;
        }
        .el-input__suffix {
          display: none;
        }
        .el-input__inner {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          padding: 0 !important;
          text-align: center;
          color: #fff;
          background-color: #bf843e;
          cursor: pointer;
        }
        &:before {
          width: 60%;
          height: calc(50% - 30px);
          content: '';
          border-width: 3px;
          border-style: solid;
          border-color: transparent;
          border-top-color: #bf843e;
          border-left-color: #bf843e;
          position: absolute;
          top: 20px;
          bottom: 50%;
          right: calc(10% - 5px);
        }
        &:after {
          width: 60%;
          height: calc(50% - 30px);
          content: '';
          border-width: 3px;
          border-style: solid;
          border-color: transparent;
          border-bottom-color: #bf843e;
          border-left-color: #bf843e;
          position: absolute;
          top: calc(50% + 8px);
          bottom: 20px;
          right: calc(10% - 5px);
        }
        &.logical-or {
          &:before {
            border-top-color: #479fa3;
            border-left-color: #479fa3;
          }
          &:after {
            border-bottom-color: #479fa3;
            border-left-color: #479fa3;
          }
          .el-input__inner {
            background-color: #479fa3;
          }
        }
      }
    }
    .ul-wrap {
      margin: 5px;
      border: 1px solid #ddd;
      box-shadow: 1px 1px 5px #ddd;
    }
    .list-item {
      padding: 10px 50px 10px 10px;
      margin-bottom: 20px;
      border-radius: 5px;
      position: relative;
    }
    .item {
      height: 40px;
      line-height: 40px;
      color: #455fbc;
      background-color: #c0d2f6;
      border-radius: 5px;
    }
    .el-col-8 .item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: default;
    }
    .el-button {
      color: #455fbc;
      background-color: #c0d2f6;
      border-color: #c0d2f6;
      position: absolute;
      right: 10px;
      top: 15px;
    }
    .el-input__prefix,
    .el-input__suffix,
    .el-date-editor .el-range__icon,
    .el-select .el-input .el-select__caret {
      color: #455fbc;
    }
    .el-tag.el-tag--info {
      color: #4455bb;
      background-color: #e8f0ff;
    }
    .el-select .el-tag__close.el-icon-close {
      color: #fff;
      background-color: #97b5f3;
    }
    .el-input__inner,
    .el-range-editor .el-range-input,
    .el-select__input {
      color: #455fbc;
      background-color: #fff;
      border: 1px solid #c0d2f6;
      &::-webkit-input-placeholder {
        color: #455fbc;
      }
      &::-moz-placeholder {
        color: #455fbc;
      }
      &::-ms-input-placeholder {
        color: #455fbc;
      }
    }
    .el-select,
    .el-input-number,
    .el-date-editor {
      width: 100%;
      &.normal {
        width: 25%;
      }
    }
    .el-input-number .el-input__inner {
      padding: 0 15px;
      text-align: left;
    }
    .el-input-number__decrease,
    .el-input-number__increase {
      display: none;
    }
    .el-date-editor {
      height: auto;
      .el-range-input {
        color: #455fbc;
        border: 0;
      }
      .el-range-separator {
        color: #455fbc;
        width: 30px;
      }
    }
    .factory-content-item {
      background-color: #f6f7f8;
    }
  }
}
</style>
